<template>
    <view class="page">
        <view class="page-form-item">
            <text>联系人</text>
            <input type="text" placeholder="请输入联系人姓名" v-model="name" />
        </view>
        <view class="page-form-item">
            <text>联系方式</text>
            <input type="number" placeholder="请输入联系方式" v-model="phone" />
        </view>
        <view class="page-form-desc">
            <view class="desc-title">情况说明</view>
            <view class="desc-text">
                <textarea auto-height="true" placeholder="详细说明你的需求，可提高专家回复率和回复速度哦..." v-model="desc"></textarea>
            </view>
        </view>
        <view class="page-form-btn">
            <button @click="sendAppoint">提交预约</button>
        </view>
    </view>
</template>

<script>
    export default {
        name: "orderExpert",
        data(){
            return{
                expertId: '',
                name: '',
                phone: '',
                desc: ''
            }
        },
        onLoad(query){
            this.expertId = query.expertId
        },
        methods:{
            sendAppoint(){
                this.getTemplate()
            },
            async userAppointExpert(){
                let params = {
                    user_token: uni.getStorageSync('userToken'),
                    user_name: this.name,
                    contact_phone: this.phone,
                    expert_id: this.expertId,
                    desc: this.desc
                }
                const res = await this.$api.userAppointExpert(params);
                uni.hideLoading();
                if (res.data.level == 'success'){
                    uni.showToast({
                        icon: 'success',
                        title: res.data.message,
                        duration: 1500
                    })
                    setTimeout(function () {
                        uni.navigateBack({
                            delta: 1
                        })
                    },1500)
                } else {
                    uni.showToast({
                        icon: 'none',
                        title: res.data.message,
                        duration: 3000
                    })
                }
            },
            //获取订阅消息模板id
            async getTemplate(){
                uni.showLoading({
                    title: '提交中...'
                });
                let _this = this
                const res = await _this.$api.getTemplate({type: 'expert_appoint'});
                if (res.data.level == 'success'){
                    wx.requestSubscribeMessage({
                        tmplIds: res.data.data,
                        success(res){
                            console.log(res);
                        },
                        complete(res){
                            console.log("aaaaaaaa")
                            _this.userAppointExpert()
                        }
                    })
                }
            },
        }
    }
</script>

<style scoped lang="scss">
    @import '~@/static/scss/mixin.scss';
    .page{
        background: #F8F8F8;
        @include flex(flex-start, flex-start);
        flex-direction: column;
        min-height: 100vh;
    }
    .page-form-item{
        background: #FFFFFF;
        width: calc(100vw - 60rpx);
        padding: 38rpx 30rpx;
        @include flex(flex-start);
        flex-direction: row;
        border-bottom: 1rpx solid #E5E5E5;
        text{
            height: 45rpx;
            line-height: 45rpx;
            font-size: 32rpx;
        }
        input{
            width: 70%;
            margin-left: auto;
            height: 45rpx;
            line-height: 45rpx;
            font-size: 32rpx;
            text-align: right;
        }
    }
    .page-form-desc{
        background: #FFFFFF;
        width: calc(100vw - 60rpx);
        padding: 30rpx;
        border-bottom: 1rpx solid #E5E5E5;
        .desc-title{
            height: 45rpx;
            line-height: 45rpx;
            font-size: 32rpx;
            padding-bottom: 24rpx;
        }
        .desc-text{
            width: 100%;
            textarea{
                min-height: 90rpx;
                width: 100%;
                line-height: 45rpx;
                font-size: 32rpx;
            }
        }
    }
    .page-form-btn{
        margin-top: auto;
        padding: 60rpx 30rpx;
        width: calc(100vw - 60rpx);
        button{
            width: 100%;
            height: 88rpx;
            line-height: 88rpx;
            text-align: center;
            color: #FFFFFF;
            font-size: 34rpx;
            background: #3782FF;
            border-radius: 44rpx;
        }
    }
</style>